<template>
	<view>
		<u-swipe-action :show="item.show" :index="index"
			v-for="(item, index) in list" :key="item.id" 
			@click="click" @open="open"
			:options="options"
		>
			<view class="item u-flex u-flex-1" @click="$app.jump('/pages/chat/detail')">
				<view>
					<image mode="aspectFill" :src="item.images" />
				</view>
				<!-- 此层wrap在此为必写的，否则可能会出现标题定位错误 -->
				<view class="info-wrap u-flex-1">
					<view class="top-title u-flex">
						<view class="title u-flex-1 u-flex">
							<view class="name">李白</view>
							<view class="type">房联</view>
							<view class="score">7.9</view>
						</view>
						<view class="date">2021-07-29</view>
					</view>
					<view class="label u-flex">
						<view>闪电回复</view>
						<view>熟悉房源</view>
						<view>熟悉房源</view>
					</view>
					
					<view class="message u-line-1">{{ item.title }}</view>
				</view>
			</view>
		</u-swipe-action>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [
					{
						id: 1,
						title: '长安回望绣成堆，山顶千门次第开',
						images: '/static/images/avatar.png',
						show: false
					},
					{
						id: 2,
						title: '新丰绿树起黄埃，数骑渔阳探使回',
						images: '/static/images/avatar.png',
						show: false
					},
					{
						id: 3,
						title: '登临送目，正故国晚秋，天气初肃',
						images: '/static/images/avatar.png',
						show: false,
					},
					{
						id: 4,
						title: '登临送目，正故国晚秋，天气初肃',
						images: '/static/images/avatar.png',
						show: false,
					},
					{
						id: 5,
						title: '登临送目，正故国晚秋，天气初肃',
						images: '/static/images/avatar.png',
						show: false,
					},{
						id: 6,
						title: '登临送目，正故国晚秋，天气初肃',
						images: '/static/images/avatar.png',
						show: false,
					},
					{
						id: 7,
						title: '登临送目，正故国晚秋，天气初肃',
						images: '/static/images/avatar.png',
						show: false,
					}
				],
				disabled: false,
				btnWidth: 200,
				show: false,
				options: [
					// {
					// 	text: '收藏',
					// 	style: {
					// 		backgroundColor: '#007aff'
					// 	}
					// },
					{
						text: '删除',
						style: {
							backgroundColor: '#de1f1c'
						}
					}
				]
			};
		},
		methods: {
			click(index, index1) {
				if(index1 == 0) {
					this.list.splice(index, 1);
					this.$u.toast(`删除了第${index}个聊天`);
				} else {
					this.list[index].show = false;
					this.$u.toast(`收藏成功`);
				}
			},
			// 如果打开一个的时候，不需要关闭其他，则无需实现本方法
			open(index) {
				// 先将正在被操作的swipeAction标记为打开状态，否则由于props的特性限制，
				// 原本为'false'，再次设置为'false'会无效
				this.list[index].show = true;
				this.list.map((val, idx) => {
					if(index != idx) this.list[idx].show = false;
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.item {
		display: flex;
	}
	
	image {
		width: 120rpx;
		flex: 0 0 120rpx;
		height: 120rpx;
		margin: 0 30rpx 0;
		border-radius: 50%;
	}
	
	.info-wrap{
		width: 0;padding: 20rpx 0;
		border-bottom: 1rpx solid #ddd;
		.top-title{
			.title{
				overflow: hidden;
				view{margin: 0 6rpx;}
				.name{font-size: 32rpx;font-weight: bold;margin-left: 0;}
				.type{background-color: #4edcc5;color: #fff;font-size: 24rpx;padding: 2rpx 10rpx;border-radius: 6rpx;}
				.score{color: #f00;font-size: 32rpx;margin-right: 0;}
			}
			.date{margin-right: 20rpx;font-size: 24rpx;}
		}
		.label{
			padding: 10rpx 0;flex-wrap: wrap;
			view{border: 1rpx solid #ccc;font-size: 24rpx;border-radius: 8rpx;padding: 4rpx 10rpx;margin-right: 14rpx;margin-top: 4rpx;
				&:last-child{margin-right: 0;}
			}
		}
		.message{width: 100%;}
	}
</style>
